<template>
	<div>
		<div>
		   <div>
		        <el-button type="primary" @click="addBtn" size="mini">添加</el-button>
		    </div>
		</div>
		<br>
		<div class="searchForm">
		    <div class="flex">
		        用户手机号： 
				<selectUser @callEnter="search" ref="selectUser" @getUserId="getUserId"  />
			</div>
			<div>
			    <el-button type="primary" size="mini" @click="search">检索</el-button>
			    <el-button size="mini" @click="clearSearch">重置/检索</el-button>
			</div>
		</div>
		<br>
		<el-table  :data="list"
			 border  
			 style="width: 100%"
			>
			<el-table-column   align="center"    prop="name"    label="姓名"></el-table-column>
			<el-table-column   align="center"    prop="phone"    label="手机号"></el-table-column>
			<el-table-column  label="类型"   align="center">
			     <template slot-scope="scope">
					{{['','交押金','退押金','扣押金','释放押金','占用押金'][scope.row.type]}}
			     </template>
			 </el-table-column>
			 <!-- <el-table-column  label="押金截图"   align="center">
			      <template slot-scope="scope">
			 		 <el-image 
						 v-if="scope.row.img_url"
						 style="width: 100px; height: 50px;margin-top: 5px;"
						 :preview-src-list="[scope.row.img_url]"
			 		     :src="scope.row.img_url"></el-image>
					 <div v-if="!scope.row.img_url">
						 --
					 </div>
			      </template>
			  </el-table-column> -->
			  <el-table-column   align="center"    prop="pay_account"   label="付款账号"></el-table-column>
			 <el-table-column   align="center"    prop="pay_type"   label="付款类型"></el-table-column>
			 <!-- <el-table-column   align="center"   label="收款账号">
				 <template slot-scope="scope">
					 <div>
						 {{scope.row.shou_account || '--'}}
					 </div>
				 </template>
			 </el-table-column> -->
			<el-table-column   align="center"    prop="add_time"   label="注册时间"></el-table-column>
			<el-table-column   align="center"    prop="update_time"   label="修改时间"></el-table-column>
			<el-table-column   align="center"    prop="price"    label="金额"></el-table-column>
			<el-table-column   align="center"   label="审核状态">
				<template slot-scope="scope">
				   <div>
						<el-switch
						  @change="changeStatus(scope.row)"	
						  v-model="scope.row.status"
						 :inactive-value="'0'"
						 :active-value="'1'"
						 >
						</el-switch>
				   </div>
				</template>
			</el-table-column>
			<el-table-column   align="center"    prop="remark"   label="备注"></el-table-column>
			<el-table-column  label="操作"   align="center">
			     <template slot-scope="scope">
					 <el-button 
						v-if="scope.row.type==2 || scope.row.type==3"
						type="text" @click="editRow(scope.row)">编辑</el-button>
					<el-button type="text" @click="delRow(scope.row.id)">删除</el-button>
			     </template>
			 </el-table-column>
		</el-table>
		<div class="page">
		    <el-pagination
		            background
		            @size-change="pageChange"
		            @current-change="handleCurrentChange"
		            :current-page="page"
		            :page-size="pageSize"
		            layout="total, sizes, prev, pager, next, jumper"
		            :total="page_totle">
		    </el-pagination>
		</div>
		<el-dialog
		        :title="addTitle"
				:close-on-click-modal="false"
		        :visible.sync="formShow"
		        width="1000px"
		>
		  <div>
			  <el-form ref="form" :model="form" label-width="80px">
				  <el-form-item label="用户">
				      <selectUserBtn ref="selectUserBtn" @getUserInfo="getUserInfo" />
				  </el-form-item>
				  <!-- <el-form-item label="类型">
				      <el-radio-group v-model="form.type">
				          <el-radio label="2">退押金</el-radio>
				          <el-radio label="3">扣押金</el-radio>
				        </el-radio-group>
				      </el-form-item>
				  </el-form-item> -->
				  <el-form-item label="付款账户" v-if="form.type==2">
				      <el-select v-model="form.pay_id" 
						size="mini" placeholder="请选择">
				          <el-option
				            v-for="item in options"
				            :key="item.id"
				            :label="item.account_type"
				            :value="item.id">
				          </el-option>
				      </el-select>
				  </el-form-item>
				  <el-form-item label="金额">
				      <el-input v-model="form.price" size="small"></el-input>
				  </el-form-item>
				 <!-- <el-form-item label="审核状态">
				      <el-radio-group v-model="form.status">
				        <el-radio label="0">未审核</el-radio>
				        <el-radio label="1">已审核</el-radio>
				      </el-radio-group>
				    </el-form-item> -->
				 <!-- <el-form-item label="描述">
				      <el-input v-model="form.desc" size="small"></el-input>
				  </el-form-item> -->
				  <el-form-item label="备注">
				      <el-input v-model="form.remark" size="small"></el-input>
				  </el-form-item>
				  <el-form-item >
				      <el-button type="primary" @click="confirm" size="small">确定</el-button>
				  </el-form-item>
			  </el-form>
		  </div>
		</el-dialog>
	</div>
</template>

<script>
	import selectUser from '@/components/selectUser'
	import selectUserBtn from '@/components/selectUserBtn'
	
	export default {
		data(){
			return {
				page:1,
				pageSize:10,
				form:{
					id:null,
					type:'2', //  2 退押金 3扣押金 
					price:'', 
					mid:'',
					pay_id:"",
					pay_account:'',
					pay_type:'',
					desc:"", //描述
					remark:'', //备注
					status:'1', // 审核状态
				},
				addTitle:'新增',
				mid:[],
				options:[]
			}
		},
		components:{
			selectUser,selectUserBtn
		},
		mounted() {
			this.lodeList()
			this.lodeAccount()
		},
		methods:{
			changeStatus(row){
				let params = {
					id:row.id,
					status:row.status
				}
				this.$post('/depositSys/setDepStatus',params,res=>{
					this.$message.success('操作成功')
					this.lodeList()
				})
			},
			getUserInfo(val){
				this.form.mid = val.mid
			},
			lodeAccount(){
				this.$post('/user/lodeAccountList',{type:2},res=>{
					this.options = res.data.data
				})
			},
			getUserId(val){
				this.page = 1
				this.mid = val
				this.search()
			},
			editRow(row){
				this.addTitle = '编辑'
				for(let i in this.form){
					this.form[i] = row[i]
				}
				
				this.formShow = true
				setTimeout(()=>{
					this.$refs.selectUserBtn.user_name = row.name
				},100)
			},
			changeSort(row){
				for(let i in this.form){
					this.form[i] = row[i]
				}
				this.confirm()
			},
			delRow(id){
				this.$confirm('确定删除', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
				          this.$post('/depositSys/delDeposit',{id:id},res=>{
							  this.lodeList()
						  })
				        })
			},
			clearSearch(){
				this.mid = ''
				this.page = 1
				this.search()
			},
			confirm(){
				if(!this.form.mid){
					return this.$message.error('请选择用户')
				}
				if(this.form.type==2){
					let item = this.options.filter((item)=>{
						return item.id == this.form.pay_id
					})
					if(item.length){
						let pay_bank_res = item[0]
						this.form.pay_account = pay_bank_res.account_number
						this.form.pay_type = pay_bank_res.account_type
					}
				}
				this.$post('/depositSys/addEditDeposit',this.form,res=>{
					if(res.data.code==200){
						this.$message.success('操作成功')
						this.formShow = false
						this.lodeList()
					}
				})
			},
			addBtn(){
				this.addTitle = '新增'
				this.form={
					id:null,
					type:'2', //  2 退押金 3扣押金 
					price:'', 
					mid:'',
					pay_id:"",
					pay_account:'',
					pay_type:'',
					desc:"", //描述
					remark:'', //备注
					status:'1', // 审核状态
				}
				this.formShow = true
			},
			lodeList(){
				let params = {
					mid:this.mid,
					page:this.page,
					pageSize:this.pageSize,
					types:[2]
				}
				this.$post('/depositSys/getDepositList',params,res=>{
					let data = res.data.data
					this.page_totle = data.count
					this.list = data.result
				})
			},
		}
	}
</script>

<style>
</style>